<template>
  <div class="uploadImg_native">
    <image-reader name="image-reader1" :size="10" :is-compress='true' :is-camera-only="false" :quality="0.5"
      @select="onSelect" @complete="complete" :output-width="1500"></image-reader>
    <div class="imgView" :style="{
            'backgroundImage': `url(${img})`,
            'backgroundPosition': 'center center',
            'backgroundRepeat': 'no-repeat',
            'backgroundSize': 'contain'
            }"></div>
  </div>
</template>
<script>
  import {
    Toast
  } from 'mand-mobile'
  import imageReader from '@/components/uploadImg'
  export default {
    components: {
      [imageReader.name]: imageReader
    },
    data() {
      return {
        img: null
      }
    },
    methods: {
      onSelect(name, {
        file
      }) {
        console.log(name)
        console.log(file.name)
        console.log(file.type)
        console.log(file.size / 1024 / 1024 + 'MB')
        Toast.loading('图片处理中...')
      },
      complete(name, {
        blob,
        dataUrl,
        file //原文件对象
      }) {
        Toast.hide()
        console.log(file.name)
        console.log(file.type)
        console.log(file.size / 1024 / 1024 + 'MB')
        this.img = dataUrl
      }
    }
  }
</script>
<style lang="less" scoped>
  .uploadImg_native {
    .imgView {
      width: 500px;
      height: 500px;
      border: 1px solid #dddddd;
    }
  }
</style>